<template>
  <div class="tabbar">
    <van-tabbar v-model="currentIndex" route>
      <template v-for="(item, index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img
              v-if="currentIndex !== index"
              :src="getAssetURL(item.image)"
              alt=""
            />
            <img v-else :src="getAssetURL(item.imageActive)" alt="" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from "vue"
import { useRoute } from 'vue-router'

import tabbarData from "@/assets/data/tabbar.js"
import { getAssetURL } from "@/utils/loadAssetURL.js"

const currentIndex = ref(0);
const route = useRoute();

watch(route, (newValue) => {
  const index = tabbarData.findIndex((item) => item.path === newValue.path);
  if(index === -1) return;
  currentIndex.value = index;
});

</script>

<style lang="less" scoped>
.tabbar {
  // 样式穿透
  :deep(.van-tabbar-item--active) {
    color: #ff9854;
  }

  img {
    height: 26px;
  }
}
</style>